import { FontAwesome } from "@expo/vector-icons"
import { Pressable, StyleSheet, Text, View } from "react-native"

interface ButtonProps {
    label: string,
    theme?: "primary",
    onPress?: () => void
}

export default function Button({ label, theme, onPress }: ButtonProps) {
    return (
        theme === "primary" ?
            <View style={[styles.buttonContainer, { borderWidth: 4, borderColor: "#ffd33d", borderRadius: 18 }]}>
                <Pressable style={[styles.button, { backgroundColor: "#fff" }]} onPress={onPress}>
                    <FontAwesome name="picture-o" size={18} color="#25292e" style={styles.buttonIcon} />
                    <Text style={[styles.buttonLabel, { color: "#25292e" }]}>{label}</Text>
                </Pressable>
            </View>
            :
            <View style={styles.buttonContainer}>
                <Pressable style={styles.button} onPress={onPress}>
                    <Text style={styles.buttonLabel}>{label}</Text>
                </Pressable>
            </View>
    )
}

const styles = StyleSheet.create({
    buttonContainer: {
        width: 320,
        height: 68,
        marginHorizontal: 20,
        padding: 3,
        alignContent: "center",
        justifyContent: "center"
    },
    button: {
        width: "100%",
        height: "100%",
        borderRadius: 10,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center"
    },
    buttonIcon: {
        paddingRight: 8
    },
    buttonLabel: {
        color: "white",
        fontSize: 16,
    }
})